<template>
  <div class="overview">
    <div class="overview_center">
      <div class="overview_top">
        <h3>新建用户</h3>
      </div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.cellphone" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="form.realname" />
        </el-form-item>
        <el-form-item label="用户地址">
          <el-select v-model="form.region" placeholder="请选择你的地址">
            <el-option label="上海" value="上海" />
            <el-option label="北京" value="北京" />
            <el-option label="广东" value="广东" />
            <el-option label="青岛" value="青岛" />
            <el-option label="深圳" value="深圳" />
            <el-option label="广西" value="广西" />
            <el-option label="佛山" value="佛山" />
            <el-option label="江门" value="江门" />
            <el-option label="重庆" value="重庆" />
          </el-select>
        </el-form-item>
        <el-form-item label="加入时间">
          <el-col :span="11">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="选择时间"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-time-picker
              v-model="form.date2"
              placeholder="选择时间"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="加入部门类型">
          <el-checkbox-group v-model="form.type">
            <el-radio v-model="form.type" label="网络" size="large">
              网络
            </el-radio>
            <el-radio v-model="form.type" label="管理" size="large">
              管理
            </el-radio>
            <el-radio v-model="form.type" label="文员" size="large">
              文员
            </el-radio>
            <el-radio v-model="form.type" label="媒体" size="large">
              媒体
            </el-radio>
            <!-- <el-checkbox label="网络部门" name="type" />
            <el-checkbox label="运营部门" name="type" />
            <el-checkbox label="媒体部门" name="type" />
            <el-checkbox label="管理部门" name="type" /> -->
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自我介绍">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { accountLoginRequest } from "@/service/login/login.js";
import { useStore } from "vuex";
import formatDate from "@/utils/dayjs.js";
import createUser from "@/service/analysis/overview.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, computed } from "vue";

// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: "",
  sex: "",
  desc: "",
  cellphone: "",
  realname: "",
});
const store = useStore();
const cellphone = computed(() => store.state.login.userInfo.cellphone);
const onSubmit = async () => {
  if (
    form.name == "" ||
    form.cellphone == "" ||
    form.realname == "" ||
    form.type == "" ||
    form.sex == "" ||
    form.region == ""
  ) {
    ElMessage({
      message: "请填写完整",
      type: "warning",
    });
    return;
  }
  ElMessageBox.prompt("请输入你的密码确保身份", "验证", {
    confirmButtonText: "确定创建",
    cancelButtonText: "取消",
  })
    .then(async ({ value }) => {
      if (value == null) {
        ElMessage({
          message: "请输入当前账户密码",
          type: "warning",
        });
        return;
      }
      const cellphone = computed(() => store.state.login.userInfo.cellphone);
      const account = {
        name: cellphone.value,
        password: value,
      };
      const valueResult = await accountLoginRequest(account);
      if (valueResult.status == 200 && valueResult.data.tips == "授权成功") {
        ElMessage({
          message: valueResult.data.tips,
          type: "success",
        });
      } else {
        ElMessage.error("密码错误");
        return;
      }

      const result = await createUser("/createUser", {
        name: form.name,
        cellphone: form.cellphone,
        realname: form.realname,
        sex: form.sex,
        type: form.type,
        region: form.region,
      });
      if (result.data.code == 200 && result.status == 200) {
        ElMessage({
          type: "success",
          message: result.data.message,
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Input canceled",
      });
    });
};
</script>

<style lang="scss" scope>
.overview {
  padding: 5px 20px;

  text-align: center;
  display: flex;
  justify-content: center;
  &_center {
    width: 50%;
  }
  &_top {
    text-align: left;
    width: 100%;
    padding-left: 20px;
    margin-bottom: 10px;
  }
}
</style>
